Ultra Admin Theme

Bring your Admin Panel to life.

created (mm/dd/yyyy): 20/03/2015
latest update (mm/dd/yyyy): 20/03/2015
by: themepassion
email: themepassion@jaybabani.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email at themepassion@jaybabani.com. Thanks so much!

Ultra Admin is a premium admin dashboard theme. Specially designed to give your admin panel a unique and elegant look.It is easy to customize and coded in developer friendly manner.

It is fully responsive admin dashboard template built with Bootstrap 3+ & 4+ Framework, HTML and CSS3, jQuery. It is adaptive with any size viewport. Solid integration of reusable UI components and latest trending plugins. This theme can be used for type of project applications.

Ultra Admin includes many plugins implemented in 65+ separate HTML files. It is designed to be a complete admin panel for any web project.

Built with Bootstrap v3.x and v4.x
Latest jQuery
Fully Responsive & Interactive
Elegant & Clean User Interface
Large collection of UI Components
Interactive widgets
Perfect Scroll Bar
Brilliant Chat API
Widgets like Todo task, notifications, Progress Tiles, Weather widget, User Profile tile, Counters etc.
Expanded and Collapsed Menu (Multi Menu Levels)
Page Loader Integration (PACE)
Many Reusable UI Components
Morris Chart
Chartjs
Flot Charts
Sparkline Charts
Easy Pie Chart
Rickshaw Charts
Pie Knobs
Gauge Meter
Google maps
Vector maps
Data Tables
Responsive Tables
Font Icons(Font Awesome 4.2.0) & Glyphicons
Full width & Boxed Layout
Fully loaded Mailbox
Form UI Groups & Elements
Autonumeric
Form Input masks elements
Form Wizard
jQuery Validations (message and icon based)
Form Tags input
CKEditor
Bootstrap WYSIHTML5
Markdown Editors
Color Picker
Date Picker
Date Time Picker
Time Picker
File Dropzone (Drag and Drop Upload)
iCheck Checkbox and Radio elements
IOS type Switches
Multi Select
Select 2 - Select replacement library
Typeahead library for prefilling
UI KIT components
jQuery Sortable
Draggable Panels
Spinner
Range Sliders
Calendar integration
Numeric Counter
Image Cropper
Isotope Based Filterable Portfolio Gallery
jQuery UI and easing integrated
jsTree (File and Folder Management tool)
Messenger Notifications
Tocify
Viewport Library for onscreen animations
Pricing Tables (2 views - Narrow and Expanded)
Timeline (2 types - Centered and left aligned)
Login Page
User Registration Page (with social media)
Invoice
Team Members
Search Page
Blogs
FAQ
404, 500 Error Pages
User Lockscreen
Grid Based System
Google font - OpenSans and Oswald
Theme Barebone included
Well structured and formatted code
Commented and Prefixed Based Stylesheet
Detailed Documentation
Works well in all latest browsers like chrome, Firefox, Opera, Safari, IE9+

The template consist of following components as show in image below:
1.) Main header Top Bar - Consist of logo, toggle options like the chat , messages, notifications, search and user profile shortcuts
2.) Side bar - Consist of user image and details, Main menu, Bar Graph Widgets
3.) Content Body
4.) Chat Slider - Consist of groups and Contact Users for instant messaging. Click on user opens the chat window with that user.

HTML Structre

Page Head

				<!DOCTYPE html>
<html class=" ">
    <head>
        <!-- 
         * @Package: Ultra Admin - Responsive Theme
         * @Subpackage: Bootstrap
         * @Version: 1.0
         * This file is part of Ultra Admin Theme.
        -->
        <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
        <meta charset="utf-8" />
        <title>Ultra Admin : Default Layout</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta content="" name="description" />
        <meta content="" name="author" />

        <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon" />    <!-- Favicon -->
        <link rel="apple-touch-icon-precomposed" href="assets/images/apple-touch-icon-57-precomposed.png">	<!-- For iPhone -->
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/apple-touch-icon-114-precomposed.png">    <!-- For iPhone 4 Retina display -->
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/apple-touch-icon-72-precomposed.png">    <!-- For iPad -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/apple-touch-icon-144-precomposed.png">    <!-- For iPad Retina display -->


        <!-- CORE CSS FRAMEWORK - START -->
        <link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen"/>
        <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="assets/plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
        <link href="assets/fonts/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
        <link href="assets/css/animate.min.css" rel="stylesheet" type="text/css"/>
        <link href="assets/plugins/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" type="text/css"/>
        <!-- CORE CSS FRAMEWORK - END -->


        <!-- CORE CSS TEMPLATE - START -->
        <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
        <link href="assets/css/responsive.css" rel="stylesheet" type="text/css"/>
        <!-- CORE CSS TEMPLATE - END -->

    </head>
    <!-- END HEAD -->

Header

				
<!-- BEGIN BODY -->
<body class=" ">
    <!-- START TOPBAR -->
    <div class='page-topbar '>
        <div class='logo-area'>

        </div>
        <div class='quick-area'>
            <div class='pull-left'>
                <ul class="info-menu left-links list-inline list-unstyled">
                    ...
                </ul>
            </div>      
            <div class='pull-right'>
                <ul class="info-menu right-links list-inline list-unstyled">            
                    ...
                </ul>           
            </div>      
        </div>

    </div>
    <!-- END TOPBAR -->

Left Sidebar

				<!-- START CONTAINER -->
<div class="page-container row-fluid">

    <!-- SIDEBAR - START -->
    <div class="page-sidebar ">

        <!-- MAIN MENU - START -->
        <div class="page-sidebar-wrapper" id="main-menu-wrapper"> 

            <!-- USER INFO - START -->
            <div class="profile-info row">
                ...
            </div>
            <!-- USER INFO - END -->

            <ul class='wraplist'>
                ...
            </ul>

        </div>
        <!-- MAIN MENU - END -->

        <div class="project-info">
            <div class="block1">        
                ...
            </div>
            <div class="block2">        
                ...
            </div>
        </div>
    </div>
    <!--  SIDEBAR - END -->

Main Content

				<!-- START CONTENT -->
<section id="main-content" class=" ">
    <section class="wrapper" style='margin-top:60px;display:inline-block;width:100%;padding:15px 0 0 15px;'>

    <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
        <div class="page-title">
            ...               
        </div>
    </div>
    <div class="clearfix"></div>
    
    <div class="col-lg-12">
        <section class="box ">
            ...
        </section>
    </div>

    </section>
</section>
<!-- END CONTENT -->

Page End

				</div>
<!-- END CONTAINER -->

<!-- LOAD FILES AT PAGE END FOR FASTER LOADING -->

<!-- CORE JS FRAMEWORK - START --> 
<script src="assets/js/jquery-1.11.2.min.js" type="text/javascript"></script> 
<script src="assets/js/jquery.easing.min.js" type="text/javascript"></script> 
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>  
<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js" type="text/javascript"></script> 
<script src="assets/plugins/viewport/viewportchecker.js" type="text/javascript"></script>  
<!-- CORE JS FRAMEWORK - END --> 


<!-- CORE TEMPLATE JS - START --> 
<script src="assets/js/scripts.js" type="text/javascript"></script> 
<!-- END CORE TEMPLATE JS - END --> 

<!-- Sidebar Graph - START --> 
<script src="assets/plugins/sparkline-chart/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="assets/js/chart-sparkline.js" type="text/javascript"></script>
<!-- Sidebar Graph - END --> 

</body>
</html>

Main Menu

					<!-- MAIN MENU - START -->
<div class="page-sidebar-wrapper" id="main-menu-wrapper">
    <!-- USER INFO - START -->
    <div class="profile-info row">
        ...
    </div>
    <!-- USER INFO - END -->
    <ul class='wraplist'>
        <li>
            ...
        </li>
        <li>
            <a href="javascript:;"> <i class="fa fa-suitcase"></i> <span class="title">...</span><span class="arrow "></span></a>
            <ul class="sub-menu">
                <li><a href="xx.html">...</a></li>
                ... ...
            </ul>
        </li>
        <li class="open">
            ...
            <ul class="sub-menu" style='display:block;'>
                <li><a class="active" href="...">...</a></li>
                ... ...
            </ul>
        </li>
        <li>
            ...
            <ul class="sub-menu">
                <li>
                    ...
                </li>
                <li>
                    ...
                    <ul class="sub-menu">
                        <li>
                            ...
                        </li>
                        <li>
                            ...
                            <ul class="sub-menu">
                                <li>
                                    ...
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
<!-- MAIN MENU - END -->

					<!-- START TOPBAR -->
<div class='page-topbar '>
    <div class='logo-area'>
    </div>
    <div class='quick-area'>
        <div class='pull-left'>
            <ul class="info-menu left-links list-inline list-unstyled">
                <li class="">
                    <a href="#" data-toggle="sidebar" class="sidebar_toggle">
                        <i class="fa fa-bars"></i>
                    </a>
                </li>
                <li class="">
                    <a href="#" data-toggle="dropdown" class="toggle">
                        <i class="fa fa-envelope"></i>
                        <span class="badge badge-primary">7</span>
                    </a>
                    <ul class="dropdown-menu messages animated fadeIn">
                        <li class="list">
                            <ul class="dropdown-menu-list list-unstyled ps-scrollbar">
                                ...
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="">
                    ...
                </li>
                <li class="hidden-sm hidden-xs searchform">
                    <div class="input-group">
                        <span class="input-group-addon input-focus">
                            <i class="fa fa-search"></i>
                        </span>
                        <form action="search-page.html" method="post">
                            <input type="text" class="form-control animated fadeIn" placeholder="Search & Enter">
                            <input type='submit' value="">
                        </form>
                    </div>
                </li>
            </ul>
        </div>
        <div class='pull-right'>
            <ul class="info-menu right-links list-inline list-unstyled">
                <li class="profile">
                    <a href="#" data-toggle="dropdown" class="toggle">
                        <img src="..." alt="user-image" class="img-circle img-inline">
                        <span>... <i class="fa fa-angle-down"></i></span>
                    </a>
                    <ul class="dropdown-menu profile animated fadeIn">
                        <li>
                            ...
                        </li>
                        ... ...
                    </ul>
                </li>
                <li class="chat-toggle-wrapper">
                    ...
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- END TOPBAR -->

					<!-- START CONTENT -->
<section id="main-content" class=" ">
    <section class="wrapper" style='margin-top:60px;display:inline-block;width:100%;padding:15px 0 0 15px;'>

    <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
        <div class="page-title">
            ...               
        </div>
    </div>
    <div class="clearfix"></div>
    
    <div class="col-lg-12">
        <section class="box ">
            ...
        </section>
    </div>

    </section>
</section>
<!-- END CONTENT -->

					<div class="page-chatapi hideit">
    <div class="search-bar">
        <input type="text" placeholder="Search" class="form-control">
    </div>
    <div class="chat-wrapper">
        <h4 class="group-head">Groups</h4>
        <ul class="group-list list-unstyled">
            <li class="group-row">
                <div class="group-status available">
                    <i class="fa fa-circle"></i>
                </div>
                <div class="group-info">
                    <h4><a href="#">...</a></h4>
                </div>
            </li>
            <li class="group-row">
                ...
            </li>
        </ul>
        <h4 class="group-head">Favourites</h4>
        <ul class="contact-list">
            <li class="user-row" id='chat_user_1' data-user-id='1'>
                <div class="user-img">
                    <a href="#"><img src="data/profile/avatar-1.png" alt=""></a>
                </div>
                <div class="user-info">
                    <h4><a href="#">...</a></h4>
                    <span class="status ..." data-status="...">...</span>
                </div>
                <div class="user-status ...">
                    <i class="fa fa-circle"></i>
                </div>
            </li>
            <li class="user-row" id='chat_user_2' data-user-id='2'>
                ...
            </li>
        </ul>
        <h4 class="group-head">More Contacts</h4>
        <ul class="contact-list">
            <li class="user-row" id='chat_user_4' data-user-id='4'>
                ...
            </li>
            ... ... ...
        </ul>
    </div>
</div>
<div class="chatapi-windows ">
</div>

 Ultra Admin HTML/
  ├── assets/
  │   ├── css/
  │   ├── fonts/
  │   ├── images/
  │   ├── js/
  │   ├── plugins/
  └── data/

style.css is the main CSS file located in assets/css/ folder of the package. Whole CSS file is well indexed with topic and its related code.

Also animate.min.css file is found in this folder. It has all the animation classes for various elements.

scripts.js is the mail javascript file having all the js code. File is located in assets/js/ folder. This file code is also well formatted and section in different respective function names.

Along with this chart library based js code and dashboard based js code are added in separate files for ease of use of user.

Google fonts are used in the theme. They are as follows:

Oswald - Used in Menu, page heading and buttons etc.
Opensans - Default Body fonts and used in most of the places

Ultra Admin Bootstrap Theme comes with a barebone page structure to make life of a new developer easier. The barebone has the basic structure used in a theme and is ready to add a new usable content.

Ultra Admin Theme uses many different jquery and CSS based plugins to give it amazing features. Below is the list of all plugin used.

Name	URL
jquery	http://www.jquery.com
Twitter Bootstrap 3.x and Bootstrap 4.x	http://getbootstrap.com/
jquery Perfect Scroll Bar	https://github.com/noraesae/perfect-scrollbar/
jQuery Easy Pie Chart	http://rendro.github.io/easy-pie-chart/
jQuery Sparklines	http://omnipotent.net/jquery.sparkline
Chartjs	http://www.chartjs.org/
Morris	http://www.oesmith.co.uk/morris.js/
jQuery Validation Plugin	http://jqueryvalidation.org/
Font Awesome 4.2.0	http://fontawesome.io/
Dropzone	http://www.dropzonejs.com/
Input Mask	http://github.com/RobinHerbots/jquery.inputmask
Flot Charts	http://www.flotcharts.org/
jQuery Multi Select	http://loudev.com/
Bootstrap Timepicker	http://jdewit.github.com/bootstrap-timepicker/
Bootstrap 3 WYSIWYG5	http://bootstrap-wysiwyg.github.io/bootstrap3-wysiwyg/
Chartjs	http://www.chartjs.org/
Vector map	http://jvectormap.com
DataTables	http://www.datatables.net/
Responsive Table	http://gergeo.se/RWD-Table-Patterns
jQuery Knob	http://anthonyterrien.com/knob/
FullCalendar	http://arshaw.com/fullcalendar/
Gauge	http://bernii.github.io/gauge.js/
Autonumeric	http://www.decorplanit.com/plugin/
Autosize	http://www.jacklmoore.com/autosize
CKEditor	http://ckeditor.com/
jQuery countTo	https://github.com/mhuggins/jquery-countTo
iCheck	http://git.io/arlzeA
Datepicker for Bootstrap	http://www.eyecon.ro/bootstrap-datepicker/
Colorpicker for Bootstrap	http://www.eyecon.ro/bootstrap-colorpicker/
Date Range Picker for Bootstrap	https://github.com/dangrossman/bootstrap-daterangepicker
Bootstrap Tags Input	https://github.com/timschlechter/bootstrap-tagsinput
Image Cropper	http://fengyuanchen.github.io/cropper/
Isotope	http://isotope.metafizzy.co
jQuery UI	https://jqueryui.com/
jsTree	http://jstree.com/
jQuery messenger Notification	http://github.hubspot.com/messenger/
Pace	github.hubspot.com/pace/
jQuery prettyPhoto	http://www.no-margin-for-errors.com
jQuery Tocify	http://gregfranko.com/jquery.tocify.js/
Typeahead	https://github.com/twitter/typeahead.js
UIkit	http://www.getuikit.com
jQuery View Port Checker	https://github.com/dirkgroenen/jQuery-viewport-checker

Once again, thank you so much for purchasing this Theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.

Ultra Admin Theme

Bring your Admin Panel to life.

Brief Overview

Features

Template

HTML Structre

Page Head

Header

Left Sidebar

Main Content

Page End

Main Menu

Top Bar

Main Content

Chat bar

Folder Structure

CSS

Javascript

Fonts

BareBone

Plugin List

THANK YOU!